<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>snake-canvas</title>
    <style>
        .canvas {
            width: 400px;
            margin: 0 auto;
            position: relative;
            .gridBox {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                .grid {
                    display: grid;
                    grid-template-columns: repeat(20, 20px);
                    grid-template-rows: repeat(20, 20px);
                    /* 添加网格线（可选） */
                    border: 1px solid #ccc;
                    background-image: linear-gradient(#ccc 1px, transparent 1px), 
                                        linear-gradient(90deg, #ccc 1px, transparent 1px);
                    background-size: 20px 20px; /* 网格间距 20px */
                    box-sizing: border-box;
                }
            }
        }
        .title {
            width: 400px;
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            span {
                font-size: 20px;
            }
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="title">
        <div>
            <span>得分：<span id="score">0</span></span>
        </div>
        <div>
            <span>时间：<span id="time">0</span></span>
        </div>
    </div>
    <div class="canvas">
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div class="gridBox">
        <div class="grid"></div>
    </div>
    </div>
    <p>空格键盘开始/暂停(上下左右键控制移动)</p>
    <script src="./index.js"></script>
</body>
</html>